"use client";

import React, { useState, useEffect } from "react";
import Link from "next/link";
import { PrivateReposDialog } from "./private-repos-dialog";
import { ApiKeyDialog } from "./api-key-dialog";
import { ThemeToggle } from "./ui/theme-toggle";
import { LanguageToggle } from "./ui/language-toggle";
import { useLanguage } from "~/lib/LanguageContext";

export function Header() {
  const { t } = useLanguage();
  const [isPrivateReposDialogOpen, setIsPrivateReposDialogOpen] =
    useState(false);
  const [isApiKeyDialogOpen, setIsApiKeyDialogOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 10);
    };
    
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const handlePrivateReposSubmit = (pat: string) => {
    // Store the PAT in localStorage
    localStorage.setItem("github_pat", pat);
    setIsPrivateReposDialogOpen(false);
  };

  const handleApiKeySubmit = (apiKey: string) => {
    localStorage.setItem("openai_key", apiKey);
    setIsApiKeyDialogOpen(false);
  };

  return (
    <header className={`sticky top-0 z-50 backdrop-blur-sm transition-all duration-300 ${
      scrolled 
        ? "border-b border-black/10 bg-background/80 shadow-sm dark:border-white/10" 
        : "border-b-[3px] border-black dark:border-gray-700"
    }`}>
      <div className="mx-auto flex h-16 max-w-4xl items-center justify-between px-4 sm:px-8">
        <Link href="/" className="flex items-center">
          <span className="text-lg font-semibold sm:text-xl">
            <span className="text-black transition-colors duration-200 hover:text-gray-600 dark:text-white dark:hover:text-gray-300">
              Code
            </span>
            <span className="bg-gradient-to-r from-blue-600 to-blue-500 bg-clip-text text-transparent transition-colors duration-200 hover:from-blue-500 hover:to-blue-400 dark:from-blue-400 dark:to-blue-300 dark:hover:from-blue-300 dark:hover:to-blue-200">
              Mariner
            </span>
          </span>
        </Link>
        <nav className="flex items-center gap-3 sm:gap-6">
          <span
            onClick={() => setIsApiKeyDialogOpen(true)}
            className="cursor-pointer rounded-full px-3 py-1 text-sm font-medium text-black transition-all duration-200 hover:-translate-y-1 hover:bg-blue-100 hover:text-blue-600 dark:text-white dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
          >
            <span className="flex items-center sm:hidden">
              <span>{t("apiKey")}</span>
            </span>
            <span className="hidden items-center gap-1 sm:flex">
              <span>{t("apiKey")}</span>
            </span>
          </span>
          <span
            onClick={() => setIsPrivateReposDialogOpen(true)}
            className="cursor-pointer rounded-full px-3 py-1 text-sm font-medium text-black transition-all duration-200 hover:-translate-y-1 hover:bg-blue-100 hover:text-blue-600 dark:text-white dark:hover:bg-blue-900/30 dark:hover:text-blue-400"
          >
            <span className="sm:hidden">{t("privateRepos")}</span>
            <span className="hidden sm:inline">{t("privateRepos")}</span>
          </span>
          <ThemeToggle />
          <LanguageToggle />
        </nav>

        <PrivateReposDialog
          isOpen={isPrivateReposDialogOpen}
          onClose={() => setIsPrivateReposDialogOpen(false)}
          onSubmit={handlePrivateReposSubmit}
        />
        <ApiKeyDialog
          isOpen={isApiKeyDialogOpen}
          onClose={() => setIsApiKeyDialogOpen(false)}
          onSubmit={handleApiKeySubmit}
        />
      </div>
    </header>
  );
}
